@value default-dark-gray from 'canvas-editor/styles/theme';
@value default-editor-monospace-font-family from 'canvas-editor/styles/theme';
@value default-extra-light-gray from 'canvas-editor/styles/theme';
@value default-light-gray from 'canvas-editor/styles/theme';

/**
 * 1. Make sure Safari applies the correct font rendering (2 causes weirdness)
 * 2. This forces Chrome to use hardware acceleration to continuously paint the
 *    codeblock and avoid text disappearing on scroll.
 */

.canvas-block-code {
  composes: canvas-block from 'canvas-editor/components/canvas-block/styles';
  background: white; /* 1 */
  transform: translateZ(0); /* 2 */
}

.content {
  background: var(--extra-light-gray, default-extra-light-gray);
  border-radius: 4px;
  border: 1px solid var(--light-gray, default-light-gray);
  color: var(--dark-gray, default-dark-gray);
  display: block;
  font-family: var(--editor-monospace-font-family, default-editor-monospace-font-family);
  font-size: 0.9375em;
  overflow-x: auto;
  padding: 0.5em 1em;
}

.is-selected {
  composes: is-selected from 'canvas-editor/components/canvas-block/styles';
}
